<script setup>
import { ref, reactive } from 'vue'
import * as yup from 'yup'
import DynamicForm from '@/components/DynamicForm.vue'
import { USER_TYPE, GROUP_TYPE } from '@/services/Constants'
// import ReadAgreement from '@/components/ReadAgreement.vue'
import { useAppStore, useCoreStore, insStoreRefsArray } from '@/stores'

const [[appStore, refApp], [coreStore]] = insStoreRefsArray([useAppStore, useCoreStore])
const state = reactive({ loading: false })

// const options = ref([
//   { name: '一级', value: 1 },
//   { name: '二级', value: 2 }
// ])

const qiyeForm = ref({
  fields: [
    {
      label: '企业名称',
      required: true,
      name: 'un',
      class: 'h-3rem w-24rem',
      as: 'InputText',
      rules: yup.string().required('用户名不能为空')
    },
    {
      label: '统一信用代码',
      required: true,
      rules: yup.string().required('信用代码不能为空'),
      class: 'h-3rem w-24rem',
      name: 'credit_code',
      as: 'InputText'
    },
    {
      label: '经办人手机号',
      required: true,
      rules: yup.string().required('手机号不能为空'),
      class: 'h-3rem w-24rem',
      name: 'cp_number',
      as: 'InputText'
    },
    {
      label: '用户名',
      required: true,
      class: 'h-3rem w-24rem',
      name: 'name',
      rules: yup.string().required('用户名不能为空'),
      as: 'InputText'
    },
    {
      label: '密码',
      required: true,
      class: 'h-3rem w-24rem',
      name: 'pwd',
      as: 'InputText',
      type: 'password',
      rules: yup.string().required('密码不能为空')
    },
    {
      label: '确认密码',
      required: true,
      class: 'h-3rem w-24rem',
      name: 'confirm_pwd',
      as: 'InputText',
      type: 'password',
      rules: yup.string().required('确认密码不能为空')
    }
    // {
    //   label: '验证码',
    //   required: true,
    //   class: 'h-3rem w-24rem',
    //   name: 'code',
    //   as: 'InputText'
    // },
    // {
    //   label: '',
    //   required: true,
    //   name: 'readed',
    //   rules: yup.boolean().isTrue().required('请同意.'),
    //   as: ReadAgreement
    // }
  ]
})

const feiQiyeForm = ref({
  fields: [
    // {
    //   required: true,
    //   name: 'level',
    //   class: 'w-full',
    //   options,
    //   optionLabel: 'name',
    //   value: 1,
    //   as: 'SelectButton'
    // },
    {
      label: '企业名称',
      required: true,
      name: 'un',
      class: 'h-3rem w-24rem',
      as: 'InputText',
      rules: yup.string().required('名称不能为空')
    },
    {
      label: '统一信用代码',
      required: true,
      rules: yup.string().required('代码不能为空'),
      class: 'h-3rem w-24rem',
      name: 'credit_code',
      as: 'InputText'
    },
    {
      label: '用户名',
      required: true,
      class: 'h-3rem w-24rem',
      name: 'name',
      rules: yup.string().required('用户名不能为空'),
      as: 'InputText'
    },
    {
      label: '密码',
      required: true,
      class: 'h-3rem w-24rem',
      name: 'pwd',
      as: 'InputText',
      type: 'password',
      rules: yup.string().required('密码不能为空')
    },
    {
      label: '确认密码',
      required: true,
      class: 'h-3rem w-24rem',
      name: 'confirm_pwd',
      as: 'InputText',
      type: 'password',
      rules: yup.string().required('确认密码不能为空')
    }
  ]
})

const types = ref([
  { label: '企业', value: USER_TYPE.Enterprise, forms: [qiyeForm.value] },
  { label: '金融机构', value: USER_TYPE.Financing_Institution, forms: [feiQiyeForm.value] },
  { label: '担保公司', value: USER_TYPE.Guarantee_Company, forms: [feiQiyeForm.value] },
  { label: '保险公司', value: USER_TYPE.Insurance_Company, forms: [feiQiyeForm.value] },
  {
    label: '地方金融机构',
    value: USER_TYPE.Local_financial_Organization,
    forms: [feiQiyeForm.value]
  }
])

const current_type = ref(types.value[0])
const reg_form = ref({ u_type: current_type.value.value, group_type: undefined })
const formSchema = ref(current_type.value.forms[0])

function seledUType(type) {
  console.log('seled user type', type)
  reg_form.value = {}
  current_type.value = type
  formSchema.value = current_type.value.forms[0]
  if (type.value != USER_TYPE.Local_financial_Organization) {
    reg_form.value.group_type = undefined
  } else {
    reg_form.value.group_type = 0
  }
}

function onSubmit() {
  state.loading = true
  console.log('onSubmit', reg_form.value)
  state.loading = true
  appStore
    .regist(reg_form.value)
    .then((resp) => {
      console.log('regist', resp.data)
    })
    .finally(() => {
      state.loading = false
    })
}
</script>
<template>
  <div class="w-full container mx-auto flex flex-column align-content-center align-item-center">
    <article class="text-5xl text-center my-5">请选择您的注册身份</article>
    <section class="flex flex-wrap justify-content-center gap-5 my-5">
      <Button
        v-for="(item, index) in types"
        :key="index"
        :label="item.label"
        @click="seledUType(item)"
        class="w-14rem h-7rem border-round-3xl text-2xl"
        :outlined="current_type.label != item.label"
      />
    </section>
    <section
      v-if="current_type.value == USER_TYPE.Local_financial_Organization"
      class="flex justify-content-center gap-2 mb-5"
    >
      <Button
        class="w-14rem border-round-3xl text-xl"
        v-for="(item, index) in Object.entries(GROUP_TYPE)"
        :key="index"
        :label="item[0]"
        @click="() => (reg_form.group_type = item[1])"
        :outlined="reg_form.group_type != item[1]"
      />
    </section>
    <section class="flex justify-content-center">
      <DynamicForm
        class="flex flex-column gap-3"
        :schema="formSchema"
        :formdata="reg_form"
        :loading="state.loading"
        :submit="onSubmit"
        :submitProp="{ label: '注册', class: 'w-full' }"
      />
    </section>
  </div>
</template>

<style scoped>
:deep(.p-password) {
  width: 100%;
}
</style>
